<template>
  <div class="flex h-full content">
    <div id="left" class="left" ref="leftBox">
      <leftDom :treeData="treeData" @pitchOnData="pitchOnData"/>
    </div>
    <div id="line" class="resize-line" ref="lineBox"></div>
    <div id="right" class="right" ref="rightBox">
      <slot />
    </div>
  </div>
</template>
  
<script>
import leftDom from "./leftBox";
export default {
  components: {
    leftDom,
  },
  props: {
    treeData: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
    };
  },
  mounted() {
    let left = this.$refs.leftBox;
    let line = this.$refs.lineBox;
    let right = this.$refs.rightBox;

    line.onmousedown = function (e) {
      let lineLeft = e.clientX;
      line.left = line.offsetLeft;
      document.onmousemove = function (e) {
        let diffVal = line.left + (e.clientX - lineLeft);
        //左侧宽度是在页面宽度10%和60%之间
        if (
          diffVal >= document.body.clientWidth * 0.1 &&
          diffVal <= document.body.clientWidth * 0.6
        ) {
          line.style.left = diffVal + "px";
          left.style.width = diffVal + "px";
          right.style.width = document.body.clientWidth - diffVal + "px";
        }
      };
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
  methods: {
    pitchOnData(val){
      this.$emit("pitchOnData", val);
    }
  }
};
</script>
  
<style lang="css" scoped>
.flex {
  display: flex;
}

.h-full {
  height: 100%;
  height: calc(100vh - 84px);
}

.left {
  width: 20%;
  background-color: rgba(0, 0, 0, 0.01);
}

.resize-line {
  cursor: w-resize;
  flex: 0 0 10px;
  background-color: #eee;
}

.right {
  width: calc(100% - 20px);
  overflow: hidden;
}
</style>
  